<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>LSP Lesson 8: Monaco 集成演示</title>
  <style>
    body { font-family: system-ui, Arial, sans-serif; margin: 16px; }
    #toolbar { margin-bottom: 8px; }
    #log { white-space: pre-wrap; background: #f7f7f7; padding: 12px; border: 1px solid #ddd; height: 220px; overflow: auto; }
    #editor { border: 1px solid #ddd; height: 360px; }
    button { margin-right: 8px; }
    /* 语义令牌装饰样式 */
    .tok-keyword { color: #c678dd; font-weight: bold; }
    .tok-keyword-mod { color: #d19a66; font-weight: bold; text-decoration: underline; }
    .tok-keyword-readonly { color: #61afef; font-weight: bold; }
    .tok-comment { color: #7f848e; font-style: italic; }
    .tok-comment-doc { color: #98c379; font-style: italic; }
  </style>
</head>
<body>
  <h1>第八课：Monaco Editor 集成（WebSocket LSP）</h1>
  <div id="toolbar">
    <button id="btnConnect">连接</button>
    <button id="btnDisconnect">断开</button>
    <button id="btnFormat">格式化</button>
    <button id="btnTokens">语义令牌</button>
  </div>
  <div id="editor"></div>
  <div class="row">
    <label>日志：</label>
    <div id="log"></div>
  </div>
  <!-- 加载 Monaco Editor（CDN） -->
  <script src="https://unpkg.com/monaco-editor@0.44.0/min/vs/loader.js"></script>
  <script>
    require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.44.0/min/vs' } });
    require([ 'vs/editor/editor.main' ], function() {
      window.editor = monaco.editor.create(document.getElementById('editor'), {
        value: 'Here is a TODO and another TODO.',
        language: 'plaintext',
        automaticLayout: true,
        theme: 'vs-dark',
        fontSize: 14
      });
      window.dispatchEvent(new Event('monaco_ready'));
    });
  </script>
  <script src="/ws-client.js"></script>
</body>
</html>